<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>Sketch temporary geometries - 4.6</title>

    <link rel="stylesheet" href="https://js.arcgis.com/4.6/esri/css/main.css">
    <script src="https://js.arcgis.com/4.6/"></script>

    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
            font-family: verdana;
        }

        #topbar {
            background: #fff;
            position: absolute;
            top: 15px;
            right: 15px;
            padding: 10px;
        }

        .action-button {
            font-size: 16px;
            background-color: transparent;
            border: 1px solid #D3D3D3;
            color: #6e6e6e;
            height: 32px;
            width: 32px;
            text-align: center;
            box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
        }

        .action-button:hover,
        .action-button:focus {
            background: #0079c1;
            color: #e4e4e4;
        }

        .active {
            background: #0079c1;
            color: #e4e4e4;
        }
    </style>

    <script>
        require([
            "esri/views/MapView",
            "esri/WebMap",
            "esri/widgets/Sketch/SketchViewModel",
            "esri/Graphic",
            "esri/layers/GraphicsLayer",
            "dojo/domReady!"
        ], function (
            MapView, WebMap,
            SketchViewModel, Graphic, GraphicsLayer
        ) {

                // GraphicsLayer to hold graphics created via sketch view model
                var tempGraphicsLayer = new GraphicsLayer();

                // Arctic Ocean Basemap
                var webmap = new WebMap({
                    portalItem: { // autocasts as new PortalItem()
                        id: "c7381cb155a043a2bba2b84566677262"
                    },
                    layers: [tempGraphicsLayer]
                });

                var view = new MapView({
                    container: "viewDiv",
                    map: webmap,
                    zoom: 5
                });

                view.when(function () {
                    // create a new sketch view model
                    var sketchViewModel = new SketchViewModel({
                        view: view,
                        layer: tempGraphicsLayer,
                        pointSymbol: { // symbol used for points
                            type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
                            style: "square",
                            color: "#8A2BE2",
                            size: "16px",
                            outline: { // autocasts as new SimpleLineSymbol()
                                color: [255, 255, 255],
                                width: 3 // points
                            }
                        },
                        polylineSymbol: { // symbol used for polylines
                            type: "simple-line", // autocasts as new SimpleMarkerSymbol()
                            color: "#8A2BE2",
                            width: "4",
                            style: "dash"
                        },
                        polygonSymbol: { // symbol used for polygons
                            type: "simple-fill", // autocasts as new SimpleMarkerSymbol()
                            color: "rgba(138,43,226, 0.8)",
                            style: "solid",
                            outline: {
                                color: "white",
                                width: 1
                            }
                        }
                    });

                    // ************************************************************
                    // Get the completed graphic from the event and add it to view.
                    // This event fires when user presses
                    //  * "C" key to finish sketching point, polygon or polyline.
                    //  * Double-clicks to finish sketching polyline or polygon.
                    //  * Clicks to finish sketching a point geometry.
                    // ***********************************************************
                    sketchViewModel.on("draw-complete", function (evt) {
                        // if multipoint geometry is created, then change the symbol
                        // for the graphic
                        if (evt.geometry.type === "multipoint") {
                            evt.graphic.symbol = {
                                type: "simple-marker",
                                style: "square",
                                color: "green",
                                size: "16px",
                                outline: {
                                    color: [255, 255, 255],
                                    width: 3
                                }
                            };
                        }
                        // add the graphic to the graphics layer
                        tempGraphicsLayer.add(evt.graphic);
                        setActiveButton();
                    });

                    // *************************************
                    // activate the sketch to create a point
                    // *************************************
                    var drawPointButton = document.getElementById("pointButton");
                    drawPointButton.onclick = function () {
                        // set the sketch to create a point geometry
                        sketchViewModel.create("point");
                        setActiveButton(this);
                    };

                    // ******************************************
                    // activate the sketch to create a multipoint
                    // ******************************************
                    var drawMultipointButton = document.getElementById(
                        "multipointButton");
                    drawMultipointButton.onclick = function () {
                        // set the sketch to create a multipoint geometry
                        sketchViewModel.create("multipoint");
                        setActiveButton(this);
                    };

                    // ****************************************
                    // activate the sketch to create a polyline
                    // ****************************************
                    var drawLineButton = document.getElementById("polylineButton");
                    drawLineButton.onclick = function () {
                        // set the sketch to create a polyline geometry
                        sketchViewModel.create("polyline");
                        setActiveButton(this);
                    };

                    // ***************************************
                    // activate the sketch to create a polygon
                    // ***************************************
                    var drawPolygonButton = document.getElementById("polygonButton");
                    drawPolygonButton.onclick = function () {
                        // set the sketch to create a polygon geometry
                        sketchViewModel.create("polygon");
                        setActiveButton(this);
                    };

                    // **************
                    // reset button
                    // **************
                    document.getElementById("resetBtn").onclick = function () {
                        tempGraphicsLayer.removeAll();
                        sketchViewModel.reset();
                        setActiveButton();
                    };

                    function setActiveButton(selectedButton) {
                        // focus the view to activate keyboard shortcuts for sketching
                        view.focus();
                        var elements = document.getElementsByClassName("active");
                        for (var i = 0; i < elements.length; i++) {
                            elements[i].classList.remove("active");
                        }
                        if (selectedButton) {
                            selectedButton.classList.add("active");
                        }
                    }
                });
            });
    </script>
</head>

<body>
    <div id="viewDiv">
        <div id="topbar">
            <button class="action-button esri-icon-blank-map-pin" id="pointButton" type="button" title="Draw point"></button>
            <button class="action-button esri-icon-handle-horizontal" id="multipointButton" type="button" title="Draw multipoint"></button>
            <button class="action-button esri-icon-polyline" id="polylineButton" type="button" title="Draw polyline"></button>
            <button class="action-button esri-icon-polygon" id="polygonButton" type="button" title="Draw polygon"></button>
            <button class="action-button esri-icon-trash" id="resetBtn" type="button" title="Clear graphics"></button>
        </div>
    </div>
</body>

</html>